import {
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElFooter,
  ElCard,
  ElInput,
  ElButton,
  ElTable,
  ElTableColumn,
  ElSelect,
  ElOption,
  ElRadioGroup,
  ElRadio,
  ElCheckboxGroup,
  ElCheckbox,
  ElSwitch,
  ElDatePicker
} from 'element-plus'
export enum PropType { string, number, boolean, object, any, enum, component };
// Element Plus 组件元数据属性
export class ComponentProp {
  type: PropType | PropType[];
  description: string;
  default?: any;
  choices?: any;
  constructor(type: PropType | PropType[], description: string) {
    this.type = type;
    this.description = description;
  }
};

// Element Plus 组件元数据定义
export class ComponentMeta {
  component: any;
  props: Record<string, ComponentProp>;
  events?: Record<string, {
    params: string[];
    description: string;
  }>;
  slots?: Record<string, {
    description: string;
    scope?: string;
  }>;
  children?: ComponentMeta[];
  constructor(props: Record<string, ComponentProp>) {
    this.props = props;
  }

};


// 组件元数据集合
export const ElementPlusMeta: Record<string, ComponentMeta> = {
  // ElButton 组件
  button:
  {
    component: ElButton,
    props:
    {
      type: { type: PropType.enum, description: '按钮类型', default: 'default', choices: ['default', 'primary', 'success', 'warning', 'danger', 'info', 'text'] },
      size: { type: PropType.enum, description: '按钮尺寸', default: '', choices: ['large', 'small', 'mini'] },
      disabled: { type: PropType.boolean, description: '是否禁用', default: false },
      loading: { type: PropType.boolean, description: '是否加载中', default: false },
      icon: { type: [PropType.component, PropType.string], description: '图标组件' },
      plain: { type: PropType.boolean, description: '是否朴素按钮', default: false },
      round: { type: PropType.boolean, description: '是否圆角按钮', default: false },
      circle: { type: PropType.boolean, description: '是否圆形按钮', default: false },
      'native-type': { type: PropType.enum, description: '原生 button 的 type 属性', default: 'button', choices: ['button', 'submit', 'reset'] },
      autofocus: { type: PropType.boolean, description: '是否默认聚焦', default: false },
      color: { type: PropType.string, description: '按钮颜色', default: '' },
      dark: { type: PropType.boolean, description: '是否暗色模式', default: false },
      text: { type: PropType.boolean, description: '是否文字按钮', default: false },
      bg: { type: PropType.boolean, description: '是否显示背景', default: false },
      link: { type: PropType.boolean, description: '是否链接按钮', default: false },
    },
    events: {
      click: {
        params: ['event: MouseEvent'],
        description: '点击时触发',
      },
    },
    slots: {
      default: {
        description: '按钮内容',
      },
      loading: {
        description: '自定义加载中状态',
      },
      icon: {
        description: '自定义图标',
      },
    },
  },

  // ElContainer 组件
  container  : {
    component: ElContainer,
    props: {
      direction: { type: PropType.enum, description: '布局方向', default: 'vertical', choices: ['vertical', 'horizontal'] },
    },
    slots: {
      default: { description: '容器内容' },
    },
  },

  // ElHeader 组件
  cheader: {
    component: ElHeader,
    props: {
      height: { type: PropType.string, description: '高度', default: '60px' },
    },
    slots: {
      default: { description: '顶部内容' },
    },
  },

  // ElAside 组件
  caside: {
    component: ElAside,
    props: {
      width: { type: PropType.string, description: '宽度', default: '300px' },
    },
    slots: {
      default: { description: '侧边栏内容' },
    },
  },

  // ElMain 组件
  cmain: {
    component: ElMain,
    props: {
      width: { type: PropType.string, description: '宽度' },
    },
    slots: {
      default: { description: '主内容区' },
    },
  },

  // ElFooter 组件
  cfooter: {
    component: ElFooter,
    props: {
      height: { type: PropType.string, description: '高度', default: '60px' },
    },
    slots: {
      default: { description: '底部内容' },
    },
  }
}
